import React, { useEffect, useRef, useState } from "react";
import { Modal,Carousel,Spin,Empty} from 'antd';
import {getTestSubject} from 'api/index'
import {LeftCircleOutlined,RightCircleOutlined} from '@ant-design/icons'
import SubjectDialog from './subjectComponent'
const PreviewWordSubject = (props) => {
  const {isModalVisible, setIsModalVisible,id} = props

  const [spinning,setSpinning] = useState(false)
  const [subject,setSubject] = useState([])
  
  const carouselSubject = useRef()

  useEffect(()=>{
    isModalVisible&&getNewData()
  },[isModalVisible]) // eslint-disable-line react-hooks/exhaustive-deps


  const handleOk = async () => {
    setIsModalVisible(false);
  }

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  
  const getNewData = async() => {
    setSpinning(true)
      
    const res = await getTestSubject(id)
    const data1 = res.result
    data1.forEach(i=>{
      i.showMore=true
    })
    setSubject(data1)

     setSpinning(false)
  }



  const onChangeSubject = (key) => {
  }

  const prevSubject=() => {
    carouselSubject.current.prev()
  }
  const nextSubject=() => {
    carouselSubject.current.next()
  }
  
  return   <Modal destroyOnClose width={1000}  wrapClassName="modal-preview-subject-word modal-paper"  title="试卷预览" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
       <Spin tip="Loading..." spinning={spinning}>
       <LeftCircleOutlined className="icon-left" onClick={()=>prevSubject()}></LeftCircleOutlined>
       <RightCircleOutlined className="icon-right"  onClick={()=>nextSubject()}></RightCircleOutlined>
          <Carousel ref={carouselSubject} afterChange={onChangeSubject}>
               {
                 subject.length?subject.map((i,j)=>{
                   return  <div key={j} className="word">
                      <SubjectDialog count={subject.length} sort={j+1} subjectItem={i} setShow={(x,value)=>i.showMore=value}></SubjectDialog>
                  </div>
                 }):<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
               }
           </Carousel>
     </Spin>
   </Modal>

}
export default PreviewWordSubject